$(function() {
    // 创建一个图形模型
    var graph = new joint.dia.Graph;

    // 创建一个画布
    var paper = new joint.dia.Paper({
        el: $('#paper-container'),
        width: 800,
        height: 600,
        model: graph,
        gridSize: 10
    });

    // 工具栏按钮点击事件
    $('#rect-button').on('click', function() {
        createShape('rect');
    });

    $('#circle-button').on('click', function() {
        createShape('circle');
    });

    $('#line-button').on('click', function() {
        createShape('line');
    });

    // 创建图形
    function createShape(type) {
        var shape;
        switch (type) {
            case 'rect':
                shape = new joint.shapes.standard.Rectangle();
                shape.position(100, 30);
                shape.resize(100, 40);
                shape.attr({
                    body: {
                        fill: 'blue'
                    },
                    label: {
                        text: '矩形',
                        fill: 'white'
                    }
                });
                break;
            case 'circle':
                shape = new joint.shapes.standard.Circle();
                shape.position(300, 150);
                shape.resize(60, 60);
                shape.attr({
                    body: {
                        fill: 'green'
                    },
                    label: {
                        text: '圆形',
                        fill: 'white'
                    }
                });
                break;
            case 'line':
                shape = new joint.shapes.standard.Link();
                shape.source({ x: 100, y: 100 });
                shape.target({ x: 200, y: 200 });
                shape.attr({
                    line: {
                        stroke: 'red',
                        strokeWidth: 2
                    }
                });
                break;
        }
        shape.addTo(graph);
    }

    // 启用拖拽和缩放
    paper.on('cell:pointerdown', function(cellView, evt) {
        if (cellView.model instanceof joint.shapes.standard.Circle) {
            paper.options.interactive = { vertexAdd: false };
        } else {
            paper.options.interactive = true;
        }
    });

    paper.on('cell:pointerup', function(cellView, evt) {
        paper.options.interactive = true;
    });
});